<template>
  <div id="app">
    <!-- 3.使用组件名称 -->
    <!-- <HelloWorld/> -->
    <VueFor></VueFor>
    <!-- <VueEvent/> -->
    <!-- <VueBind></VueBind> -->
  </div>
</template>

<script>
// es6语法 模块导入导出
// 1.导入组件
import HelloWorld from "./components/HelloWorld.vue";
import VueFor from "./components/VueFor.vue";
import VueEvent from "./components/VueEvent.vue";
import VueBind from "./components/VueBind.vue";
// 2.导出组件
export default {
  // name: 'App',
  // 2.1 配置组件名称 components
  components: {
    HelloWorld,
    VueFor,
    VueBind,
    VueEvent
  },
  // 5.组件内的变量 data(){return {}} 独立作用域
  data() {
    return {
      msg: "哈哈哈",
      user: "admin",
      text: "我是一个p标签<span>span</span>",
      flag: true,
      num: 1,
    };
  },
};
</script>

<style lang="less">
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
